<!-- 竞猜活动详情  -->
<template>
	<s-layout title="冠军猜想" :bgStyle="{ color: '#f2f2f2' }">
		
		<view class="container">
			<uni-collapse>
				<uni-collapse-item title="详情信息">
					<view class="collapse-box2" v-html="`${state.textConten}`"></view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		
		
		
		<s-empty v-if="state.total === 0" icon="/static/coupon-empty.png" text="暂无数据"></s-empty>
		
		<view class="uni-list" style="margin-top: 25px;">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd list-box" v-for="(item, index) in state.items"
					:key="index">
					<view class="list-num">{{ index + 1 }}</view>
					<view class="img-box">
						<image class="img-img" :src="`${url}${item.image}`" mode="center" style="height: 25px;"></image>
					</view>
					<view class="list-name">{{ item.name }}</view>
					<view>
						<checkbox :value="item.id" :disabled="item.stats" :checked="zhuangtai(item.id)"
							style="transform: scale(0.7)" />
					</view>
				</label>
			</checkbox-group>
		</view>

	
		<view class="btn-tijaio" style="margin-top: 25px;">
			<button class="mini-btn" type="primary" size="mini" @click="submitBtn"
				:disabled="state.submit_btn || state.isExpire==true" v-if="state.isChecked==false" style="background-color:#FFCCCC">确认</button>
				
				
			<button class="mini-btn" type="primary" size="mini"  v-if="state.isChecked==true" style="background-color:#FFCCCC">已确认</button>
		</view>

		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
			contentdown: '上拉加载更多',
		}" @tap="loadmore" />
	</s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	computed,
	reactive
} from 'vue';
import _ from 'lodash';
import data from '@/sheep/api/data';

const url = baseUrl.slice(0, baseUrl.lastIndexOf("/index.php"));

// 数据
const pagination = {
	data: [],
	current_page: 1,
	total: 1,
	last_page: 1,
};

const state = reactive({
	data: {},
	selected: [], // 用于绑定选中的checkbox值
	loadStatus: '',
	total: 1,
	items: [],
	submit_btn: false,
	textConten:"",
	isExpire:false,
	isChecked:false
});

const zhuangtai = (e) => {
	return state.selected.includes(e);
}


function checkboxChange(e) {
	let num = state.data.team_count;
	let valueList = state.items.map(item => item.id + "");//所有id
	let arr = valueList.filter(item => !e.detail.value.includes(item));//没有选中
	if (e.detail.value.length == num) {
		state.selected = e.detail.value;
		for (let i = 0; i < state.items.length; i++) {
			for (let j = 0; j < arr.length; j++) {
				if (state.items[i].id == arr[j]) {
					state.items[i].stats = true;
				}
			}
		}
	} else if (e.detail.value.length < num) {
		state.selected = e.detail.value;
		for (let i = 0; i < state.items.length; i++) {
			state.items[i].stats = false;
		}
	}
}

async function getData(id) {
	let { code, data } = await sheep.$api.game.teamslist(id);
	if (code) {
		state.textConten = data.guessModel.extdatacontent
		state.isExpire =data.guessModel.isExpire;
		if (data.teamids) {
			state.isChecked=true;
			state.selected = data.teamids.split(",").map(item => +item);
			state.submit_btn = true;
			state.items = data.data.map(item => {
				item.stats = true;
				return item
			});

		} else {
			state.items = data.data.map(item => {
				item.stats = false;
				return item
			});
		}

	}
}

function submitBtn() {
	if (!state.selected.length) {
		return uni.showToast({
			title: "请选择",
			icon: "success",
			duration: 2000
		});
	}
	uni.showModal({
		title: '提示',
		content: '确认进行此操作吗？',
		success: async function (res) {
			if (res.confirm) {
				let res = await sheep.$api.game.eventsguessuser({
					userid: sheep.$store('user').userInfo.id,
					eventid: state.data.event_id,
					teamid: state.selected.join(","),
					guessid: state.data.id
				})
				if (res.code) {
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 2000
					});
					getData(state.data.id)
				}
				// 这里执行用户确认后的逻辑
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});

}


// async function getData(page = 1, list_rows = 5) {
// 	state.loadStatus = 'loading';
// 	const res = await sheep.$api.coupon.list({
// 		list_rows,
// 		page
// 	});
// 	if (res.code === 1) {
// 		let couponlist = _.concat(state.pagination.data, res.data.data);
// 		state.pagination = {
// 			...res.data,
// 			data: couponlist,
// 		};
// 		if (state.pagination.current_page < state.pagination.last_page) {
// 			state.loadStatus = 'more';
// 		} else {
// 			state.loadStatus = 'noMore';
// 		}
// 	}
// }

// async function getCoupon(page = 1, list_rows = 5) {
// 	state.loadStatus = 'loading';
// 	let res = await sheep.$api.coupon.userCoupon({
// 		type: state.type,
// 		list_rows,
// 		page,
// 	});
// 	if (res.code === 1) {
// 		let couponlist = _.concat(state.pagination.data, res.data.data);
// 		state.pagination = {
// 			...res.data,
// 			data: couponlist,
// 		};
// 		if (state.pagination.current_page < state.pagination.last_page) {
// 			state.loadStatus = 'more';
// 		} else {
// 			state.loadStatus = 'noMore';
// 		}
// 	}
// }

// 加载更多
// function loadmore() {
// 	if (state.loadStatus !== 'noMore') {
// 		if (state.currentTab == 0) {
// 			getData(state.pagination.current_page + 1);
// 		} else {
// 			getCoupon(state.pagination.current_page + 1);
// 		}
// 	}
// }

onLoad((Option) => {
	state.data = Option;
	getData(Option.id);
});
// onReachBottom(() => {
// 	loadmore();
// });
</script>
<style lang="scss" scoped>
.btn-zhuti-box {
	display: flex;
}

.btn-zhuti-box>button {
	margin-right: 10rpx;
}

.btn-zhuti-box>button:last-child {
	margin-right: 0;
}

.uni-list {
	padding: 15rpx 10rpx;
}

.list-box {
	display: flex;
	align-items: center;
	padding: 5rpx 20rpx;
	border-bottom: 1rpx solid #c1c1c1;
}

.list-num {
	padding: 10rpx;
}

.list-name {
	flex-grow: 1;
	margin-left: 20rpx;
}

.img-box {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}

.img-img {
	width: 100%;

	border-radius: 10rpx;
}

.btn-tijaio {
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
}
/*.container {
	margin-top: 20rpx;
}*/
.collapse-box2 {
    padding: 10rpx 20rpx;
    line-height: 180%;
}
</style>